{% extends "::base.html.twig" %}
{% block content %}
    <legend>Nuevo Pedido Delivery</legend>
    <form class="form-horizontal" action="{{ path('nuevo_pedido') }}" method="post">
        <div class="span6">
        <legend>Datos del Cliente</legend>
        <div class="control-group">
            <label class="control-label" for="dni">D.N.I:</label> <div class="controls"><input type="number" name="dni" id="dni"/><a class="btn"><i class="icon-search"></i></a></div>
        </div>    
        <div id="cliente">
            <div class="control-group">
                <label class="control-label" for="apellido_nombre">Apellido y Nombre:</label> <div class="controls"><input readonly="true" type="text" name="apellido_nombre" id="apellido_nombre"/></div>
            </div>
            <div class="control-group">
                <label class="control-label" contenteditable="false" for="domicilio">Domicilio:</label> <div class="controls"><input readonly="true" type="text" name="domicilio" id="nombre"/></div>
            </div>
        </div>
        <legend>Datos de Envio:</legend>
        <div id="direccion">
            <div class="control-group">
                <label class="control-label" for="ciudad">Ciudad:</label> <div class="controls"> <select name="ciudad" id="ciudad"><option>Posadas</option></select><a class="btn"><i class="icon-pencil"></i></a></div>
            </div>
            <div class="control-group">
                <label class="control-label" for="calle">Calle:</label> <div class="controls"><input type="text" name="calle" id="calle"/></div>
            </div>
            <div class="control-group">
                <label class="control-label" for="numero">Numero:</label> <div class="controls"><input type="text" name="numero" id="numero"/></div>
            </div>    
            <div class="control-group">
                <label class="control-label" for="edificio">Edificio:</label> <div class="controls"><input type="text" name="edificio" id="edificio"/></div>
            </div>
            <div class="control-group">
                <label class="control-label" for="escalera">Escalera:</label> <div class="controls"><input type="text" name="escalera" id="escalera"/></div>
            </div>
            <div class="control-group">
                <label class="control-label" for="piso">Piso:</label> <div class="controls"><input type="text" name="piso" id="piso"/></div>
            </div>
            <div class="control-group">
                <label class="control-label" for="letra">Letra:</label> <div class="controls"><input type="text" name="letra" id="letra"/></div>
            </div>
            <div class="control-group">
                <label class="control-label" for="fecha">Fecha:</label> <div class="controls"><input type="date" name="fecha" id="fecha"/></div>
            </div>
            <div class="control-group">
                <label class="control-label" for="hora">Hora:</label> <div class="controls"><input type="time" name="hora" id="fecha" placeholder="HH:MM"/></div>
            </div>    
        </div>
        
        </div>
            <div class="span6">    
                <legend>Items</legend>
                {% if items %}
                     <a href="#nuevoItem" data-toggle="modal" class="btn">Nuevo Item</a>   
                {% else %}
                     Este pedido no contiene items. <a href="#nuevoItem" data-toggle="modal" class="btn">Nuevo Item</a>
                {% endif %}
            </div>
        <div class="form-actions pull-left span12">
            <button type="submit" class="btn btn-primary">Guardar Cambios</button>
            <a href="" type="button" class="btn">Cancelar</a>
        </div>
        <div id="nuevoItem" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; ">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="myModalLabel">Nuevo Item</h3>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="control-group">
                                <label class="control-label" for="categoria">Categoria:</label> <div class="controls"><select name="categoria" id="categoria"><option>Pizzas</option></select></div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="producto">Producto:</label> <div class="controls"><select name="producto" id="producto"><option>Pizzas</option></select></div>
                            </div> 
                            <div class="control-group">
                                <label class="control-label" for="Cantidad">Cantidad:</label> <div class="controls"><input type="number" step=".1"/></div>
                            </div>    
                            <div class="control-group">
                                <label class="control-label" for="ingredientes">Ingredientes:</label> 
                                <div class="controls">
                                    <table class="table table-hover" name="ingredientes" id="ingredientes">
                                        <tr><th>Producto</th><th>Cantidad</th><th>Acciones</th></tr>
                                    </table>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn" data-dismiss="modal">Cancelar</button>
                        <a class="btn btn-primary" href="">Guardar Cambios</a>
                    </div>
       </div>    
    </form>
{% endblock %}